<template>
    <view class="listBox">
        <!-- 列表 -->
        <view>
            <!-- 详情页details待收货  1.待发货，2.已完成 -->
            <!-- 售后详情details1 -->
            <view class="list" @click="details(2)">
                <view class="flex justify_content_between f_28 mb_24">
                    <view class="cl_3377FF fw_bold">待发货</view>
                    <view>202204130925640001</view>
                </view>
                <view class="flex" v-for="i in 2">
                    <view>
                        <image class="shopImg" src="https://apk.xubvzpa.cn/d/file/bzlb/2019-04-16/e8295b9142bcac4c6749cd53303dded2.jpg" mode="widthFix"></image>
                    </view>
                    <view>
                        <view class="fw_bold f_32 listTitle">小牛电动车小牛电动车小牛电动车小牛电动车小牛电动车</view>
                        <view class="flex justify_content_between">
                            <view class="cl_999CA3 mr_24 f_28">2021新款;220V</view>
                            <view class="cl_999CA3 mr_24 f_28">x1</view>
                        </view>
                        <view class="flex justify_content_end mt_40 f_28">￥100</view>
                    </view>
                </view>
                <view class="flex justify_content_between f_28 mt_16">
                    <view class="cl_CCCED1">2022-02-12 20:30下单</view>
                    <view class="flex">
                        <view class="cl_666B75">共5件 合计</view>
                        <view class="flex justify_content_end cl_FF6401 f_32 fw_bold">￥2000</view>
                    </view>
                </view>
                <!-- 买家地址 -->
                <view class="userInfo f_28">
                    <view class="info">李先生 181***1210</view>
                    <view class="info">贵州省贵阳市南明区花果园购物中心1号</view>
                </view>
                <!-- 售后，申请原因 -->
                <view class="flex userInfo f_28">
                    <view class="info cl_FF6401">申请原因：</view>
                    <view class="info">七天无理由退换货</view>
                </view>
                <!-- 买家留言 -->
                <view class="flex userInfo f_28">
                    <view class="info cl_3377FF">买家留言：</view>
                    <view class="info">请快些发货，谢谢了！</view>
                </view>
                <view class="flex justify_content_end mt_16">
                    <!-- <view class="flex btn">
                    <view>联系买家</view>
                </view> -->
                    <view class="flex btn back_3377FF cl_fff" @click.stop="sendShow = true">
                        <view>立即发货</view>
                    </view>
                    <!-- <view class="flex btn back_3377FF cl_fff" @click.stop="loginst">
					<view>查看物流</view>
				</view> -->
                    <!-- <view class="flex btn back_3377FF cl_fff" @click.stop="evaluea">
					<view>查看评价</view>
				</view> -->
                    <view class="flex btn" @click.stop="refuseShow = true">
                        <view>拒绝退款</view>
                    </view>
                    <view class="flex btn back_3377FF cl_fff" @click.stop="tuikShow = true">
                        <view>确认退款</view>
                    </view>
                </view>
            </view>
            <!-- 立即发货弹窗 -->
            <u-popup :show="sendShow" mode="center" round="8">
                <view class="p_32">
                    <view class="nameTitle fw_bold f_32 mt_8">立即发货</view>
                    <view class="newName mt_32">
                        <text class="f_28 cl_666B75">物流单号</text>
                        <view class="flex back_F7F7F7">
                            <input class="name f_28 br_8" type="nickname" @blur="changeName" placeholder="请填写物流单号" />
                            <u-icon name="scan" size="24"></u-icon>
                        </view>
                    </view>
                    <view class="flex justify_content_between">
                        <view class="nameBtn back_F7F7F7 cl_333A47 f_32 br_8 mr_24" @click="sendShow = false">取消</view>
                        <view class="nameBtn back_3377FF cl_fff f_32 br_8" @click="sendShow = false">确认</view>
                    </view>
                </view>
            </u-popup>
            <!-- 拒绝退款弹窗 -->
            <u-popup :show="refuseShow" mode="center" round="8">
                <view class="p_32">
                    <view class="nameTitle fw_bold f_32 mt_8">拒绝退款</view>
                    <view class="newName mt_32">
                        <text class="f_28 cl_666B75">拒绝原因</text>
                        <view class="flex back_F7F7F7">
                            <input class="name f_28 br_8" type="nickname" @blur="changeName" placeholder="请填写拒绝原因" />
                        </view>
                    </view>
                    <view class="flex justify_content_between">
                        <view class="nameBtn back_F7F7F7 cl_333A47 f_32 br_8 mr_24" @click="refuseShow = false">取消</view>
                        <view class="nameBtn back_3377FF cl_fff f_32 br_8" @click="refuseShow = false">确认</view>
                    </view>
                </view>
            </u-popup>
            <!-- 确认退款弹窗 -->
            <u-popup :show="tuikShow" mode="center" round="8">
                <view class="p_32">
                    <view class="nameTitle fw_bold f_32 mt_8">确认退款</view>
                    <view class="newName mt_32">
                        <view class="cl_333A47 fw_bold" style="text-align: center; font-size: 50rpx">￥255</view>
                        <view style="margin-top: 20rpx">
                            <view style="display: flex; align-items: center">
                                <input class="list-input" type="number" maxlength="1" v-model="telephone.one" :focus="one" @input="onKeyInput(1)" />
                                <input class="list-input" type="number" style="margin: 0px 4px" maxlength="1" v-model="telephone.two" :focus="two" @input="onKeyInput(2)" />
                                <input class="list-input" type="number" maxlength="1" v-model="telephone.three" :focus="three" @input="onKeyInput(3)" />
                                <view style="margin: 0 5px; flex: 1"></view>
                                <input class="list-input" type="number" maxlength="1" v-model="telephone.four" :focus="four" @input="onKeyInput(4)" />
                                <input class="list-input" type="number" style="margin: 0px 4px" maxlength="1" v-model="telephone.five" :focus="five" @input="onKeyInput(5)" />
                                <input class="list-input" type="number" style="margin-right: 4px" maxlength="1" v-model="telephone.six" :focus="six" @input="onKeyInput(6)" />
                            </view>
                        </view>
                    </view>
                    <view class="flex justify_content_between">
                        <view class="nameBtn back_F7F7F7 cl_333A47 f_32 br_8 mr_24" @click="tuikShow = false">取消</view>
                        <view class="nameBtn back_3377FF cl_fff f_32 br_8" @click="tuikShow = false">确认</view>
                    </view>
                </view>
            </u-popup>
        </view>
    </view>
</template>
<script>
export default {
    name: 'order-item-goods',
    props: {
        item: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            tuikShow: false,
            refuseShow: false,
            sendShow: false,
            ProductType: 1, //0普通商品，1电池
            tipIndex: 3,
            tabIndex: 1,
            value1: 0,
            one: false,
            two: false,
            three: false,
            four: false,
            five: false,
            six: false,
            seven: false,
            telephone: {
                one: '',
                two: '',
                three: '',

                four: '',
                five: '',
                six: '',
                seven: ''
            }
        };
    },

    methods: {
        // 确认退款弹窗
        onKeyInput(event) {
            // console.log('telephoneone--->',this.telephone.one)
            // console.log(event)
            if (this.telephone.one != '' && event == 1) {
                this.two = true;
            }

            if (this.telephone.two != '' && event == 2) {
                this.three = true;
            }

            if (this.telephone.three != '' && event == 3) {
                this.four = true;
            }

            if (this.telephone.four != '' && event == 4) {
                this.five = true;
            }

            if (this.telephone.five != '' && event == 5) {
                this.six = true;
            }

            if (this.telephone.six != '' && event == 6) {
                this.seven = true;
            }
        },
        // 待发货详情
        details(type) {
            console.log(1);
            if (this.ProductType == 0) {
                uni.navigateTo({
                    url: '/pages/me/MyOrder/MallToBePaid?type=' + type
                });
            }
            if (this.ProductType == 1) {
                uni.navigateTo({
                    url: '/pages/me/MyOrder/BatteryCompleted'
                });
            }
        },
        // 售后详情
        details1() {
            uni.navigateTo({
                url: '/pages/business/AfterSales'
            });
        },
        // 查看评价
        evaluea() {
            uni.navigateTo({
                url: '/pages/me/MyOrder/orderEvaluation'
            });
        },
        // 查看物流
        loginst() {
            console.log(1);
            uni.navigateTo({
                url: '/pages/business/LogisticsInformation'
            });
        },
        add() {
            uni.navigateTo({
                url: '/pages/business/addProduct'
            });
        },
        add_zc() {
            uni.navigateTo({
                url: '/pages/business/CarRental'
            });
        }
    }
};
</script>

<style scoped lang="scss">
.nameTitle {
    text-align: center;
}
.list-input {
    width: 88rpx;
    height: 88rpx;
    line-height: 88rpx;
    font-weight: bold;
    border-radius: 16rpx;
    font-size: 40rpx;
    text-align: center;
    background: #f7f7f7;
    margin: 8rpx;
}
.active {
    color: #3377ff !important;
}
.bottonTab {
    height: 100rpx;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    padding-bottom: 20rpx;
    padding-top: 20rpx;
}
.tabitem {
    width: 33.3%;
    margin: 0 auto;
    display: inline-block;
    text-align: center;
    font-size: 28rpx;
    color: #ccced1;
}
.tabIcon {
    width: 40rpx;
    height: 40rpx;
    display: block;
    margin: 0 auto;
}
.name {
    width: 574rpx;
    height: 92rpx;
    line-height: 92rpx;
    padding: 0 24rpx;
}

.nameBtn {
    width: 298rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    display: inline-block;
    margin-top: 64rpx;
}
.userInfo {
    background: #f7f7f7;
    border-radius: 16rpx;
    font-size: 28rpx;
    padding: 8rpx 24rpx;
    margin-top: 26rpx;
    .info {
        padding: 8rpx 0;
    }
}
.listTitle {
    width: 400rpx;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.list {
    background: white;
    border-radius: 24rpx;
    margin-top: 24rpx;
    padding: 24rpx;
    display: block;
    overflow: hidden;
}
.shopImg {
    width: 200rpx;
    height: 200rpx;
    border-radius: 16rpx;
    margin-right: 24rpx;
}
.tipbox {
    background: #f7f7f7;
    border-radius: 8rpx;
    color: #666b75;
    font-size: 28rpx;
    padding: 8rpx;
}
.tip {
    padding: 16rpx;
    border-radius: 8rpx;
}
.tipActive {
    background: white;
    color: #00091a;
    padding: 16rpx;
    border-radius: 8rpx;
}
.tab {
    color: #999ca3;
    font-size: 28rpx;
    margin: 19rpx;
}
.tabActive {
    color: #3377ff;
    font-size: 32rpx;
    margin: 19rpx;
    font-weight: bold;
}
.btn {
    height: 68rpx;
    line-height: 68rpx;
    padding: 0 30rpx;
    text-align: center;
    border: 2rpx solid #ccced1;
    border-radius: 16rpx;
    margin: 0 12rpx;
    font-size: 28rpx;
}
</style>
